<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="添加培训情况"
      @cancel="colseVisible"
      width="60%"
      class="annualAssessment-trainLogs-modal"
      >
      <template slot="footer">
        <a-button @click="colseVisible">取消</a-button>
        <a-button :disabled="selectedRowKeysArr.length?false:true" class="blue-btn" type="primary" @click="okHandle">确定</a-button>
      </template>
      <div class="personal-info-content">
          <div style="width: 100%;">
              <commpVxeTable
              :key="trainingRecordsKey"
              :config="trainingRecordsConfig"
              :columns="trainingRecordsColumnsVxe"
              :formItem="trainingRecordsFormItem"
              @checkboxChange="checkboxChange"
              ref="trainingTableRef"
              @searchEvent="searchEvent"
              @resetEvent=""
              >
                  <template v-slot:year_slotName="{data}">
                      <a-date-picker mode="year" format='YYYY' v-model="trainingSearchYear"
                      @panelChange="($event)=>{ trainingSearchYear = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,year:moment(trainingSearchYear).format('YYYY')}}" />
                  </template>
                  <template v-slot:fpxkssj_slotName="{data}">
                      <a-date-picker format='YYYY-MM-DD' v-model:value="trainingfpxkssj"
                      @change="($event)=>{ trainingfpxkssj = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,fpxkssj:moment(trainingfpxkssj).format('YYYY-MM-DD')}}" />
                  </template>
                  <template v-slot:fpxjssj_slotName="{data}">
                      <a-date-picker format='YYYY-MM-DD' v-model:value="trainingfpxjssj"
                      @change="($event)=>{ trainingfpxjssj = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,fpxjssj:moment(trainingfpxjssj).format('YYYY-MM-DD')}}" />
                  </template>

                  <template v-slot:externalOperations="{data}">
                      <vxe-form-item>
                          <template>
                              <a-button class="blue-btn" type="primary" @click="addTraining({},false)">添加</a-button>
                          </template>
                      </vxe-form-item>
                      <vxe-form-item>
                          <template>
                              <a-button class="red-btn" type="primary" @click="batchDelete()">批量删除</a-button>
                          </template>
                      </vxe-form-item>
                  </template>
                  <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                      <a-form layout="inline" class="search-form" >
                          <a-form-item >
                              <a-button class="blue-btn" type="primary" @click="editTraining(row,false)">编辑</a-button>
                          </a-form-item>
                          <a-form-item >
                              <a-button class="blue-btn" type="primary" @click="editTraining(row,true)">查看</a-button>
                          </a-form-item>
                      </a-form>
                  </template>
              </commpVxeTable>
          </div>
      </div>
    </a-modal>
    <trainingRecords ref="trainingRecordsRef" @sussecTraining="sussecTraining" />
  </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import trainingRecords from './trainingRecords.vue'
import moment from 'moment'
import assessCheckApi from './service/api'
import { saveNpryNdPxjl, } from './service/index'
export default {
  components: {
      commpVxeTable,trainingRecords
  },
  props: {
    idd: {
      type: String,
      default: '',
      required:false
    },
  },
  data() {
    return {
      visible: false,
      moment,
      trainingRecordsKey:null,
      trainingSearchYear:moment().format('YYYY'),
      trainingfpxkssj:'',
      trainingfpxjssj:'',
      trainingRecordsConfig:{
          api: assessCheckApi.sysUserPxjlqueryPageList,
          rowId: 'id',
          height:520,
          paramet:{
              year:moment().format('YYYY'),
          }
      },
      trainingRecordsFormItem:[{
          label: '认定内容',
          model: 'fpxmc',
      },{
          label: '开始日期',
          model: 'fpxkssj',
          slotName:'fpxkssj_slotName',
      },{
          label: '结束日期',
          model: 'fpxjssj',
          slotName:'fpxjssj_slotName',
      },{
          label: '年度',
          model: 'year',
          slotName:'year_slotName',
      }],//
      trainingRecordsColumnsVxe: [
        {
          type: 'checkbox',
          width: 60 ,
          fixed: 'left'
        },{
            title: "年度",
            field: "fjlnd",
            width:72,
        },{
            title: "认定内容",
            field: "fpxmc",
        },{
            title: "开始日期",
            field: "fpxkssj",
            width:141,
        },{
            title: "结束日期/获得日期",
            field: "fpxjssj",
            width:141,
        },{
            title: "学时",
            field: "fpxxs",
            width:72,
        },{
            title: "认定类型",
            field: "fpxlx",
        },{
            title: "操作",
            field: "id",
            width:180,
            slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
            },
        }],
        idList: [],
      selectedRowKeysArr:[],
    }
  },
  methods: {
    checkboxChange(val){
        //console.log('当前选择',val)
        this.selectedRowKeysArr = val
        this.idList = []
        if(val.length){
            val.forEach(item => {
                this.idList.push(item.id)
            });
        }
    },
    colseVisible(){
      this.visible = false
      this.selectedRowKeysArr = []
      this.trainingRecordsKey = Date.now()
    },
    okHandle(){
      //console.log('this.idd',this.idd)
      let data = {
        id: this.idd,
        ids: this.idList.toString(),
        opinion: ''
      }
      //console.log(data)
      saveNpryNdPxjl(data).then(res => {
        if(res.success){
          this.$message.success(res.message)
          this.$emit('selectFuntion')
          this.colseVisible()
        }
      })
      // this.$emit('selectFuntion',this.selectedRowKeysArr)
      // this.colseVisible()
    },
    searchEvent(val1,val2){
        this.searchFrom = {...val1,...val2}
    },
    addTraining(row,val){//添加
        this.$refs.trainingRecordsRef.visible = true
        this.$refs.trainingRecordsRef.getData(row,val)
    },
    batchDelete(){
      let that = this
      if(this.selectedRowKeysArr.length){
          this.$confirm({
              title:'确认要删除吗？',
              onOk() {
                  sysUserPxjldeleteBatch({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                      if(res.code == 200){
                          that.$refs.trainingTableRef.searchEvent()
                          that.$message.success(res.message)
                      }else{
                          that.$message.warning(res.message)
                      }
                  })
              }
          })
      }else{
          this.$message.warning('请选择删除项')
      }
    },
    sussecTraining(){
        this.$refs.trainingTableRef.searchEvent()
        this.$emit('modifiedSuccess')
    },
    editTraining(row,val){//编辑
        this.$refs.trainingRecordsRef.visible = true
        this.$refs.trainingRecordsRef.getData(row,val)
    },
  },
}
</script>
<style lang="less">
  .annualAssessment-trainLogs-modal {

  }
</style>
